<template>
	<div class="improve-lv">
		<div class="com-header">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				升级{{team_disname}}
			</div>
		</div>
		<div class="no-place"></div>
		<div class="a-banner">
			<img :src="list.team_banner" />
		</div>
		<div class="i-content">
			<div v-html="list.team_content"></div>
		</div>
		<div class="a-content">
			<div class="ac-content">
				<div class="ac-header">
					<div class="line"></div>
					<div class="title"><i class="icon"></i>升级条件</div>
					<div class="line"></div>
				</div>
				<div class="ac-need">
					<div class="ac-need-c"
						v-if="list.require_condition1_bool==1"
					>
						<div class="an-header">
							<span>条件一</span>
						</div>
						<div class="acn-con">
							<div class="ac-need-left">
								<p class="num"><strong>{{ruleList.require_son_num}}</strong>人</p>
								<p class="title">推荐有效直属{{agent_disname}}</p>
								<p class="title">当前<span>{{nowList.son_num}}</span>人</p>
							</div>
							<div class="add">
								<i class="iconfont">&#xe6b9;</i>
							</div>
							<div class="ac-need-right">
								<p class="num"><strong>{{ruleList.require_son_others_num}}</strong>人</p>
								<p class="title">推荐有效非直属{{agent_disname}}</p>
								<p class="title">当前<span>{{nowList.son_others_num}}</span>人</p>
							</div>
						</div>
						
					</div>
					<div class="ac-need-c"
						v-if="list.require_condition2_bool==1"
					>
						<div class="an-header">
							<span>条件二</span>
						</div>
						<div class="acn-con">
							<div class="ac-need-left">
								<p class="num"><strong>{{ruleList.require_team_orders}}</strong>单</p>
								<p class="title">{{agent_disname}}总订单数量</p>
								<p class="title">当前<span>{{nowList.team_orders}}</span>单</p>
							</div>
							<div class="add">
								<i class="iconfont">&#xe6b9;</i>
							</div>
							<div class="ac-need-right">
								<p class="num"><strong>{{ruleList.require_credit_total}}</strong>元</p>
								<p class="title">个人累计收益</p>
								<p class="title">当前<span>{{nowList.credit_total}}</span>元</p>
							</div>
						</div>
					</div>					
				</div>
				<div class="tip">
					<p>自购或分享出单的{{agent_disname}}才算有效{{agent_disname}}</p>
				</div>
				<div class="ac-tips"
					v-if="list.team_price_year != 0"
				>
					<h1>收费标准</h1>
					<div class="at-con">
					    <span v-if="list.team_price_year!=0">年付 <em>{{list.team_price_year}}</em> 元
	                    </span>
	                    <span v-if="list.team_price_month!=0">月付 <em>{{list.team_price_month}}</em> 元
	                    </span>
	                    <span v-if="list.team_price_forever!=0">永久 <em>{{list.team_price_forever}}</em> 元</span>
					</div>
				</div>
			    <div class="note">
                    <div v-if="list.require_condition1_bool==1||list.require_condition2_bool==1">
                        <p v-if="list.condition_mode==0">
                            <span v-if="num==2">满足条件一或条件二任意一个即可自动升级</span>
                            <span v-if="num==1">满足条件一即可自动升级</span>
                            <span v-if="list.require_condition3_bool==1">您也可以选择直接付费升级</span>
                        </p>
                        <p v-if="list.condition_mode==1">
                            <span v-if="num==2">同时满足条件一和条件二即可<span v-if="list.require_condition3_bool==1">付费</span><span v-if="list.require_condition3_bool==0">自动</span>升级</span>
                            <span v-if="num==1">满足条件一即可<span v-if="list.require_condition3_bool==1">付费</span><span v-if="list.require_condition3_bool==0">自动</span>升级</span>
                        </p>
                    </div>
                </div>
			</div>			
		</div>
		<div class="ac-footer"
			@click="showPay()"
			v-if="list.require_condition3_bool==1"
		>
			<p>升级{{team_disname}}</p>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				list: [],
				nowList: [],
				ruleList: [],
				num: '',
				agent_disname: window.localStorage.getItem("agent_disname"),
				team_disname: window.localStorage.getItem("team_disname"),
			}
		},
		mounted(){
			axios.post(Http.JOIN)
			.then( res => {
				var ret = res.data;
				this.list= ret.data;
				this.nowList = ret['data']['now_data'];
				this.ruleList = ret['data']['require_rules'];
				this.num = ret.data.require_condition1_bool + ret.data.require_condition2_bool;
			})
		},
		methods: {
			showPay: function(){
				if (this.list.pay_bool == 0) {
					Toast("你还未达到升级条件")
				}else{
					this.$router.push({
						name: '支付升级',
						params: {
							month: this.list.team_price_month,
							year: this.list.team_price_year,
							forever: this.list.team_price_forever,
						}
					})
				}
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.improve-lv{
		background: #ff4e48;
		min-height: 12.8rem;
		.com-header{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			background: #ff4e48;
			color: #fff;
		}
		.a-banner{
			width: 100%;
			img{
				width: 100%;
			}
		}
		.i-content{
			padding: 0.24rem;
			padding-bottom: 0;
			text-align: left;
			color: 0.28rem;
			div{
				padding: 0.3rem;
				border-radius: 0.2rem;
				box-shadow: 0 0 0.1rem #999;
				background: #fff;
				b{
					font-weight: 700;
				}
			}
		}
		.a-content{
			padding: 0.2rem 0.24rem;
			text-align: left;
			.ac-content{
				background: #fff;
				border-radius: 0.1rem;
				font-size: 0.26rem;
				padding: 0.3rem;
				.ac-header{
					display: flex;
					align-items: center;
					justify-content: center;
					height: 0.5rem;
					font-size: 0.28rem;
					.title{
						margin: 0 0.4rem;
						.icon{
							margin-right: 0.2rem;
							width: 0.4rem;
							height: 0.4rem;
							display: inline-block;
							vertical-align: middle;
							background: url(../assets/img/index_quantitle.png) center center no-repeat;
							background-size: contain;
						}
					}
				}
				.ac-need{
					margin-top: 0.1rem;
					margin-bottom: 0.2rem;
					line-height: 0.5rem;
					color: #ff5b6f;
					font-size: 0.28rem;
					.ac-need-c{
						.an-header{
							margin: 0.2rem 0;
							width: 100%;
							text-align: center;
							span{
								display: inline-block;
								width: 1.2rem;
								height: 0.54rem;
								line-height: 0.56rem;
								text-align: center;
								border: 0.01rem dashed #ff4e48;
								border-radius: 0.54rem;
								font-size: 0.24rem;
								color: #ff4e48;
							}
						}
						.acn-con{
							display: flex;
							align-items: top;
							justify-content: center;
							.ac-need-left{
								font-size: 0.20rem;
								color: #333;
								text-align: center;
								flex: 0 0 40%;
								width: 40%;
								.num{
									display: inline-block;
									margin-bottom: 0.2rem;
									width: 1.4rem;
									height: 1.4rem;
									line-height: 1.4rem;
									text-align: center;
									border-radius: 1.4rem;
									background: #ff4e48;
									color: #fff;
									font-size: 0.3rem;
								}
								.title{
									span{
										color: #ff4e48;
									}
								}
							}
							.add{
								margin: 0 0.2rem;
								margin-top: 0.5rem;
								i{
									font-size: 0.5rem;
									color: #999;
									font-weight: bold;
								}
								
							}
							.ac-need-right{
								font-size: 0.20rem;
								color: #333;
								text-align: center;
								flex: 0 0 40%;
								width: 40%;
								.num{
									display: inline-block;
									margin-bottom: 0.2rem;
									width: 1.4rem;
									height: 1.4rem;
									line-height: 1.4rem;
									text-align: center;
									border-radius: 1.4rem;
									background: #ffa548;
									color: #fff;
									font-size: 0.3rem;
								}
								.title{
									span{
										color: #ff4e48;
									}
								}
							}
						}
					}
				}
				.tip{
					margin-bottom: 0.3rem;
					width: 100%;
					text-align: center;
					p{
						font-size: 0.20rem;
						color: #999;
					}
				}
				.ac-tips{
					padding: 0.2rem;
					background: #ffa548;
					h1{
						width: 100%;
						text-align:center;
						font-size: 0.26rem;
						margin-bottom: 0.2rem;
						font-weight: bold;
					}
					.at-con{
						display: flex;
						align-items: center;
						justify-content: space-between;
						span{
							em{
								color: #ff0037;
							}
						}
					}
				}
				.note{
					margin-top: 0.4rem;
					margin-bottom: 0.2rem;
					p{
						width: 100%;
						span{
							display: inline-block;
							margin-bottom: 0.1rem;
							width: 100%;
							text-align: center;
							font-size: 0.24rem;
							font-weight: 700;
							color: #ff4e48;
						}
					}
										
				}
			}
		}
		.ac-footer{
			padding: 0.3rem 0.4rem;
			padding-bottom: 2rem;
			p{
				height: 0.88rem;
				line-height: 0.88rem;
				border-radius: 0.88rem;
				background: #37cec7;
				color: #fff;
				font-size: 0.28rem;
			}
		}
	}
</style>